import { useEffect, useRef, useState } from "react";
import { Image, Button } from "antd";
import { PageContainer } from "@ant-design/pro-layout";
import useCommonTable from "@/hooks/useCommonTable";
import {
  fetchBooksList,
  batchAddBook,
  addBookStorage,
  fetchBookStorageList,
  deleteBookStorage,
  removeBook,
} from "@/api/package";
import { fetchMallBookList } from "@/api/book";
import ProForm, {
  ModalForm,
  ProFormSelect,
  ProFormText,
} from "@ant-design/pro-form";
import ProTable from "@ant-design/pro-table";
import useRemove from "@/hooks/useRemove";
import { filterRasCode } from "@/const";
import SelectBook from "./components/SelectBook";

const Package = () => {
  const [bookList, setBookList] = useState([]);

  const getMallBookList = async () => {
    const res = await fetchMallBookList({});
    if (res.data) {
      setBookList(res.data);
    }
  };

  useEffect(() => {
    getMallBookList();
  }, []);

  const formRef = useRef();
  const actionTableRef = useRef();
  const renderAddStorage = (record) => {
    return (
      <ModalForm
        formRef={formRef}
        title="库存"
        layout="horizontal"
        trigger={<Button type="primary">添加</Button>}
        modalProps={{
          destroyOnClose: true,
          onCancel: () => {
            formRef.current?.resetFields();
          },
          onSubmit: () => {
            formRef.current?.submit();
          },
        }}
        onFinish={async (values) => {
          const res = await addBookStorage({ ...values, booksId: record.id });
          if (res.data) {
            // 刷新列表
            actionRef.current?.reload();
            actionTableRef.current?.reload();
            return true;
          }
        }}
      >
        <ProFormText name="rasCode" hidden />
        <ProFormText
          label="芯片码全码值"
          name="rasUrl"
          placeholder="扫码/感应芯片添加"
          onChange={(e) => {
            const rasCode = filterRasCode(e.target.value);
            formRef.current.setFieldsValue({
              rasCode: rasCode,
              rasUrl: e.target.value,
            });
          }}
          rules={[
            { required: true, message: "请输入芯片码" },
            {
              max: 150,
              message: "最长为150位",
            },
          ]}
        />
      </ModalForm>
    );
  };
  const actionRef = useRef();
  const renderStorageModal = (row) => {
    const columns2 = [
      {
        title: "芯片码",
        dataIndex: "rasCode",
        colSize: 2,
        fieldProps: {
          placeholder: "输入芯片码搜索",
        },
      },
      {
        title: "芯片全码值",
        dataIndex: "rasUrl",
        colSize: 2,
        fieldProps: {
          placeholder: "输入芯片全码值搜索",
        },
      },
      {
        title: "操作",
        dataIndex: "option",
        valueType: "option",
        width: 100,
        render: (_, record) => {
          return useRemove(deleteBookStorage, record, actionRef, {}, () => {
            // 刷新列表
            actionTableRef.current?.reload();
          });
        },
      },
    ];
    return (
      <ModalForm
        title="库存"
        width={"80%"}
        layout="horizontal"
        trigger={<a>{row.storage}</a>}
        onFinish={async (values) => {}}
        submitter={false}
      >
        <ProTable
          actionRef={actionRef}
          options={false}
          columns={columns2}
          search={{
            span: 4,
          }}
          params={{ booksId: row.id }}
          toolBarRender={() => {
            return renderAddStorage(row);
          }}
          request={fetchBookStorageList}
        />
      </ModalForm>
    );
  };
  const columns = [
    {
      title: "ID",
      dataIndex: "id",
      search: false,
    },
    {
      title: "图书封面",
      dataIndex: "picture",
      search: false,
      render: (_, record) => {
        return <Image width={100} height={100} src={record.picture} />;
      },
    },
    {
      title: "书名",
      dataIndex: "title",
    },
    {
      title: "作者",
      dataIndex: "author",
      search: false,
    },
    {
      title: "出版社",
      dataIndex: "publishingHouse",
      search: false,
    },
    {
      title: "库存",
      dataIndex: "storage",
      search: false,
      render: (_, record) => {
        return renderStorageModal(record);
      },
    },
  ];

  const renderFormItem = () => {
    return (
      <ProForm.Item
        name="mallBooksIdList"
        label="书名"
        rules={[{ required: true, message: "请选择" }]}
      >
        <SelectBook dataSource={bookList} />
        {/* <ProFormSelect
         
          allowClear
          fieldProps={{
            showSearch: true,
            filterOption: (input, option) => {
              return (
                option.title?.toLowerCase().indexOf(input.toLowerCase()) >= 0
              );
            },
            options: bookList,
            fieldNames: {
              value: "id",
              label: "title",
            },
          }}
          rules={[{ required: true, message: "请选择" }]}
        /> */}
      </ProForm.Item>
    );
  };
  return (
    <PageContainer>
      {useCommonTable({
        actionRef: actionTableRef,
        customTitle: "新增书包书籍",
        renderFormItem,
        columns,
        modalWidth: 1000,
        fetchList: fetchBooksList,
        add: batchAddBook,
        remove: removeBook,
        renderEdit: () => {},
        layout: "horizontal",
        actionColumnWidth: 200,
        showCheckbox: false,
      })}
    </PageContainer>
  );
};
export default Package;
